<template>
  <page-wrap back hide-tab title="简历外发" stay-still>
    <view class="form-wrap" :style="'margin-bottom:' + inputBottom + 'px;'">
      <u-form :model="form" ref="uForm" label-position="top" class="form">
        <u-form-item label="邮箱地址" prop="email">
          <u-input
            v-model="form.email"
            type="text"
            placeholder="请输入邮箱地址"
            :clearable="false"
          />
        </u-form-item>
        <u-form-item label="职位名称" prop="positionName">
          <u-input
            v-model="form.positionName"
            type="text"
            placeholder="请输入职位名称"
            :clearable="false"
          />
        </u-form-item>
        <u-form-item prop="content" class="content" :border-bottom="false">
          <!-- <u-input
            class="textarea"
            v-model="form.content"
            type="textarea"
            auto-height
            height="240"
            maxlength="1000"
            :placeholder="defaultText"
            placeholder-class="placeholder"
          /> -->
          <my-textarea
            class="mail-text"
            :value.sync="form.content"
            :placeholder="defaultText"
            :maxlength="remainingWords"
            auto-height
            show-word-limit
            @board-change="handleBottom"
          ></my-textarea>
        </u-form-item>
      </u-form>
    </view>
    <u-button
      type="primary"
      @click="submit"
      class="btn-submit"
      :loading="loading"
      >发送简历</u-button
    >
  </page-wrap>
</template>

<script>
import { resumeSendOut } from "@/api/index";
import { checkEmailValid } from "@/utils/handle";
import MyTextarea from "../components/MyTextarea.vue";
import ShareMixin from '@/mixins/share';
export default {
  mixins: [ShareMixin],
  components: {
    MyTextarea,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      defaultText: `您好！以下是我通过${this.$productName}向贵公司投递的简历，热切地希望贵公司在百忙之中给予审阅，期待您的答复！`,
      rules: {
        email: [
          {
            validator: this.checkEmailValid,
          },
        ],
        positionName: [
          {
            required: true,
            message: "请输入职位名称",
          },
        ],
      },
      form: {
        email: null,
        positionName: null,
        content: "",
      },
      loading: false,
      inputBottom: 0,
    };
  },
  computed: {
    remainingWords() {
      return 1000 - (this.form.content && this.form.content.length);
    },
  },
  watch: {
    inputBottom(val) {
      if (val) {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 99999,
            duration: 0,
          });
        });
      }
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  methods: {
    handleBottom(e) {
      this.inputBottom = e > 130 ? e - 130 : 0;
    },
    checkEmailValid(rule, value, callback) {
      if (!value) {
        return callback("请输入邮箱地址");
      } else if (!checkEmailValid(value)) {
        return callback("请输入正确的邮箱地址");
      }
      return true;
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let param = {
            person_id: this.personId,
            jobname: this.form.positionName,
            companyemail: this.form.email,
            resume_type: "1",
            mes: "这是我的简历，感谢查收",
            mailtext: this.form.content || this.defaultText,
            condition: JSON.stringify({
              homename: this.$productName,
            }),
          };
          resumeSendOut(param).then((res) => {
            this.loading = false;
            uni.showToast({
              icon: "none",
              title: +res.code === 200 ? "发送成功" : "发送失败",
            });
            setTimeout(()=> {
              uni.navigateBack();
            }, 1000);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32rpx;
}
.form {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-big;
  padding: 0 32rpx;

  ::v-deep {
    .u-form-item--left {
      font-size: $uni-font-size-nor;
    }
    .u-input__input {
      font-size: $uni-font-size-big;
    }
  }
  .content {
    ::v-deep .mail-text {
      display: block;
      width: calc(100vw - 128rpx);
      box-sizing: border-box;
      .textarea-input {
        background-color: #f8f9fb;
        border-radius: $uni-border-radius-big;
        textarea,
        .textarea {
          height: 260rpx !important;
          font-size: $uni-font-size-sm;
        }
        .placeholder {
          font-size: $uni-font-size-sm;
        }
      }
    }
  }
}

.btn-submit {
  flex-shrink: 0;
  margin: 60rpx 32rpx;
  // position: absolute;
  // bottom: calc(constant(safe-area-inset-bottom) + 60rpx);
  // bottom: calc(env(safe-area-inset-bottom) + 60rpx);
  // left: 32rpx;
  // right: 32rpx;
}
</style>

